import React from 'react';


var List = React.createClass({
    getInitialState: function () {
        return ({
            ListData: this.props.ListData,
            ItemStyle: this.props.ItemStyle,
            onItemSelected: this.props.onItemSelected,
            IconMap: this.props.IconMap,
            deletable: typeof(this.props.deletable) != "undefined" ?this.props.deletable:true,
        })

    },
    componentWillReceiveProps: function (newProps) {
        this.setState({
            ListData: newProps.ListData,
        }, this.componentWillMount);
    },
    componentWillMount: function () {
        if (this.state.ListData.length > 0) {
            this.setState({"selectedIndex": this.state.ListData.length - 1});
        }

    },
    onItemSelected: function (item, index) {
        this.props.onItemSelected(item, index);
        this.setState({"selectedIndex": index});
    },
    onItemDelete: function (item_id, index, e) {
        //var listData = this.state.ListData;
        //listData.splice(index, 1);
        //this.setState({ListData: listData});
        if (this.props.itemDeleted && typeof this.props.itemDeleted === 'function') {
            this.props.itemDeleted(item_id)
        }
        e.stopPropagation();
    },

    ////貌似没什么用
    //addItem: function (item_data) {
    //    var listData = this.state.ListData;
    //    listData.splice(0, 0, item_data);
    //    this.setState({ListData: listData});
    //},
    mouseOver: function (index) {
        document.getElementById("list_item_" + index).style.backgroundColor = "#ccc";
        if (this.state.deletable) {
            document.getElementById("delete_item_" + index).getElementsByTagName("img")[0].src = "/res/image/delete_h.png"
        }
    },
    mouseOut: function (index) {
        document.getElementById("list_item_" + index).style.backgroundColor = "";
        if (this.state.deletable) {
            document.getElementById("delete_item_" + index).getElementsByTagName("img")[0].src = "/res/image/delete.png"
        }
        if (index == this.state.selectedIndex) {
            document.getElementById("list_item_" + index).style.backgroundColor = "#f3f3f3";
            if (this.state.deletable) {
                document.getElementById("delete_item_" + index).getElementsByTagName("img")[0].src = "/res/image/delete_h.png"
            }
        }

    },
    getIcon: function (type) {
        for (var index in this.state.IconMap) {
            if (this.state.IconMap[index].type == type) {
                return this.state.IconMap[index].icon
            }
        }
        return null;
    },
    _renderListItem: function () {
        var thisOb = this;
        var ListItems = [];
        if (thisOb.state.ListData.length == 0) {
            return this.props.ifEmpty;
        }
        var img = "/res/image/delete.png"
        thisOb.state.ListData.map(function (item, index) {
            var style = this.state.ItemStyle;
            if (index == this.state.selectedIndex) {
                style = this.props.SelectedItemStyle || {};
                img = "/res/image/delete_h.png"
            } else {
                img = "/res/image/delete.png"
            }
            if (!this.state.deletable) {
                img = null;
            }
            ListItems.push(
                <div id={"list_item_"+index}
                     key={index}
                     className={"list_item"}
                     style={{cursor: "pointer"}}
                     style={style}
                     onClick={this.onItemSelected.bind(this,item,index)}
                     onMouseOver={this.mouseOver.bind(this,index)}
                     onMouseOut={this.mouseOut.bind(this,index)}
                >
                    <span style={{float: "left"}}>{thisOb.getIcon(item.type)}</span>
                    <span title={(item.title) ? item.title : item.name} style={{width:"calc(100% - 60px)",marginLeft:"10px",cursor: "pointer",textOverflow: "ellipsis",overflow: "hidden",whiteSpace: "nowrap",display:"inline-block",float: "left"}}>
                        {(item.title) ? item.title : item.name}
                    </span>
                    <span id={"delete_item_"+index} style={{float:"right",marginRight:"5px"}}>
                    <image src={img} style={{cursor: "pointer"}} onClick={this.onItemDelete.bind(this,item._id,index)}/>
                    </span>

                </div>
            )
        }.bind(this));
        return ListItems;
    },

    render: function () {
        return (
            <div className="icon_list">
                {this._renderListItem()}
            </div>
        );
    }
});

module.exports = List;